<template>
    <div class="hidden md:block border-t border-b bg-gray-50 shadow-sm" v-show="menuService.history.value.length">
        <div class="py-1 grid grid-flow-col gap-3 justify-start">
            <div  v-for="item of menuService.history.value" class="bg-white rounded-sm py-1 px-3 text-sm text-gray-500 border shadow-sm hover:bg-violet-600 hover:text-white duration-300"
            :class="{' text-white bg-slate-400':$route.name == item.routeName}" >

            <router-link :to="{name:item.routeName}">{{item.title}}</router-link>
                <span class="cursor-pointer ml-2 hover:text-red-500" @click="menuService.removeHistoryMenu(item)">x</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import menuService from '@/composables/menu'

</script>

<style scoped lang="sass"> 

</style>